<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>民主评测打分表</title>
    <script src="static/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F2F6F9;
        }

        .titles {
            width: 100%;
        }

        .title1 {
            width: 169px;
            height: 172px;
            margin: 46px auto 0;
        }

        .title1 img {
            width: 169px;
            height: 172px;
        }

        .title2 {
            margin: 7px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 36px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .title3 {
            width: 865px;
            margin: 15px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .content {
            margin: 50px auto 0;
            width: 1000px;
            background-color: #FFFFFF;
            font-size: 14px;
            box-shadow: 0px 0px 5px 0px rgba(170, 170, 170, 1);
            font-family: Roboto;
        }

        .div {
            width: 100%;
            height: 1px;
        }

        .ctop {
            width: 900px;
            height: 5px;
            background-color: #F2F6F9;
            margin: 24px auto 0;
        }

        .content1 {
            width: 900px;
            height: 100px;
            margin: 30px auto 0;
            display: flex;
            border-top: 1px solid rgb(223, 223, 223);
            border-bottom: 1px solid rgb(223, 223, 223);
        }

        .c {
            width: 150px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            font-family: Roboto;
        }

        .content2 {
            width: 900px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            border-bottom: 1px solid rgb(223, 223, 223);
        }

        .c2 {
            width: 150px;
            height: 100px;
            text-align: center;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            font-family: Roboto;
        }

        .c3 {
            width: 130px;
            height: 60px;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
        }

        .c4 {
            width: 65px;
            height: 30px;
            display: flex;
        }
        .labels {
            width: 18px;
            height: 18px;
            margin-top: 6px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

        .labelsc {
            padding: 5px;
            box-sizing: border-box;
            background-clip: content-box;
            background-color: #2b75f2;
            border: 1px solid #2b75f2;
        }

        .inp {
            width: 18px;
            height: 18px;
            opacity: 0;
        }

        .c4d {
            height: 30px;
            line-height: 30px;
            margin-left: 5px;
            font-size: 16px;
        }

        .cbottom {
            width: 280px;
            height: 50px;
            margin: 30px auto;
            line-height: 50px;
            border-radius: 4px;
            background-color: rgba(43, 117, 242, 1);
            color: white;
            font-size: 20px;
            text-align: center;
            font-family: Roboto;
        }

        .dd {
            width: 100%;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="titles">
        <div class="title1">
            <img src="imgs/调查报告.gif">
        </div>
        <div class="title2">
            民主测评投票
        </div>
        <div class="title3">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </div>
    <div class="content">
        <div class="div"></div>
        <div class="ctop"></div>
        <div class="content1">
            <div class="c" v-for="(item,index) in list">{{item.name}}</div>
        </div>
        <div class="content2" v-for="(item1,index1) in list1">
            <div class="c1 c">{{item1.name}}</div>
            <div class="c2" v-for="(item2,index2) in item1.list2">
                <div class="c3">
                    <div class="c4" v-for="(item3,index3) in item2.list3"><!---上--->
                        <label class="labels" :class="{labelsc:item3.select}"
                               @click="selects(index1,index2,index3)">
                            <input class="inp" type="radio" :name="item3.names">
                        </label>
                        <div class="c4d">{{item3.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cbottom">提交</div>
        <div class="dd"></div>
    </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        select: false,
        data: {
            list: [
                {name: ""},
                {name: "德 (25)"},
                {name: "能 (25)"},
                {name: "勤 (25)"},
                {name: "绩 (25)"},
                {name: "廉 (25)"},
            ],
            list1: [
                {//3(石磊)
                    name: "石磊1",
                    list2: [//同行5
                        {
                            list3: [//上下
                                {names: "1", name: "高", select: false},
                                {names: "1", name: "较高", select: false},
                                {names: "1", name: "一般", select: false},
                                {names: "1", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "2", name: "高", select: false},
                                {names: "2", name: "较高", select: false},
                                {names: "2", name: "一般", select: false},
                                {names: "2", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "3", name: "高", select: false},
                                {names: "3", name: "较高", select: false},
                                {names: "3", name: "一般", select: false},
                                {names: "3", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "4", name: "高", select: false},
                                {names: "4", name: "较高", select: false},
                                {names: "4", name: "一般", select: false},
                                {names: "4", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "5", name: "高", select: false},
                                {names: "5", name: "较高", select: false},
                                {names: "5", name: "一般", select: false},
                                {names: "5", name: "较差", select: false},
                            ]
                        },
                    ]
                },
                {//3(石磊)
                    name: "石磊2",
                    list2: [//同行5
                        {
                            list3: [//上下
                                {names: "6", name: "高", select: false},
                                {names: "6", name: "较高", select: false},
                                {names: "6", name: "一般", select: false},
                                {names: "6", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "7", name: "高", select: false},
                                {names: "7", name: "较高", select: false},
                                {names: "7", name: "一般", select: false},
                                {names: "7", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "8", name: "高", select: false},
                                {names: "8", name: "较高", select: false},
                                {names: "8", name: "一般", select: false},
                                {names: "8", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "9", name: "高", select: false},
                                {names: "9", name: "较高", select: false},
                                {names: "9", name: "一般", select: false},
                                {names: "9", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "10", name: "高", select: false},
                                {names: "10", name: "较高", select: false},
                                {names: "10", name: "一般", select: false},
                                {names: "10", name: "较差", select: false},
                            ]
                        },
                    ]
                },
                {//3(石磊)
                    name: "石磊3",
                    list2: [//同行5
                        {
                            list3: [//上下
                                {names: "11", name: "高", select: false},
                                {names: "11", name: "较高", select: false},
                                {names: "11", name: "一般", select: false},
                                {names: "11", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "12", name: "高", select: false},
                                {names: "12", name: "较高", select: false},
                                {names: "12", name: "一般", select: false},
                                {names: "12", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "13", name: "高", select: false},
                                {names: "13", name: "较高", select: false},
                                {names: "13", name: "一般", select: false},
                                {names: "13", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "14", name: "高", select: false},
                                {names: "14", name: "较高", select: false},
                                {names: "14", name: "一般", select: false},
                                {names: "14", name: "较差", select: false},
                            ]
                        },
                        {
                            list3: [//上下
                                {names: "15", name: "高", select: false},
                                {names: "15", name: "较高", select: false},
                                {names: "15", name: "一般", select: false},
                                {names: "15", name: "较差", select: false},
                            ]
                        },
                    ]
                },
            ]
        },
        methods: {
            selects(index1, index2, index3) {
                for (var i = 0; i < this.list1[index1].list2[index2].list3.length; i++) {
                    if (i == index3) {
                        this.list1[index1].list2[index2].list3[i].select = true;
                    }
                    else {
                        this.list1[index1].list2[index2].list3[i].select = false;
                    }
                }
            }
        }

    });
</script>
</body>
</html>